<template>
  <CustomNav title="李女士"></CustomNav>
  <!-- <view class="main">
    <u-image
      :show-loading="true"
      :src="photoList[activeIndex].url"
      width="100vw"
      height="65vh"
    ></u-image>
  </view> -->

  <view class="banner">
    <swiper :current="activeIndex" @click="click" @change="change">
      <swiper-item v-for="(item, index) in photoList" :key="index">
        <image
          :show-loading="true"
          :src="item.url"
          width="750rpx"
          height="400rpx"
        ></image>
      </swiper-item>
    </swiper>
  </view>

  <view class="photoList">
    <view class="container">
      <view
        class="row"
        v-for="(item, index) in photoList"
        :key="index"
        @click="activeIndex = index"
      >
        <!-- <u-image
            :show-loading="true"
            :src="item.url"
            :width="item.index == active ? '200rpx' : '180rpx'"
            :height="item.index == active ? '200rpx' : '180rpx'"
            radius="16rpx"
          ></u-image> -->
        <image
          :src="item.url"
          radius="16rpx"
          mode="aspectFill"
          :class="{ active: item.index == activeIndex ? true : false }"
        ></image>
      </view>
    </view>
  </view>
</template>

<script setup>
import CustomNav from "@/components/CustomNav/index.vue";

onMounted(() => {
  const instance = getCurrentInstance().proxy;
  const eventChannel = instance.getOpenerEventChannel();

  eventChannel.on("acceptDataFromOpenerPage", function (data) {
    console.log("acceptDataFromOpenerPage", data.data);

    // photoList.value = data;

    photoList.value = data.data.map((item, index, arr) => {
      return {
        index,
        url: item,
      };
    });
  });
});

const activeIndex = ref(0);
const photoList = ref([]);

const formatPhotoList = computed(() => {
  return photoList.value.map((item) => item.url);
});

const click = (e) => {
  console.log("click", e);
};
const change = (e) => {
  console.log("change", e);
  activeIndex.value = e.detail.current;
};
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.main {
  height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner {
  height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  // margin-top: 30rpx;

  swiper {
    height: 100%;
    width: 100%;

    swiper-item {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  image {
    width: 100%;
    height: 60vh;
  }
}

.photoList {
  // padding: 0 30rpx;
  height: 300rpx;
  position: fixed;
  bottom: 0;
  width: 100%;

  .container {
    height: 100%;
    display: flex;
    align-items: center;
    overflow-x: scroll;

    .row {
      display: inline-block;
      width: 180rpx;
      height: 180rpx;
      margin-right: 20rpx;
      margin-left: 20rpx;

      image {
        width: 180rpx;
        height: 180rpx;
        border-radius: 12rpx;
        transition: all 0.2s;
      }

      .active {
        transform: scale(1.2);
      }
    }
  }
}
</style>
